<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.red1 input{
			background: red;
		}
		.red2 input{
			background: rgb(200,0,0);
		}
		.red3 input{
			background: rgb(150,0,0);
		}
		.red4 input{
			background: rgb(80,0,0);
		}
		.red{
			color:red;
		}
		#wrap{
			width: 400px;
            height: 400px;
            border:2px solid black;
		}
		.in{
			width: 400px;
			height: 200px;
			background: skyblue;
		}
		#box{
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<ul id="content">
		<li>haha</li>
		<li>hehe</li>
		<li>xixi</li>
	</ul>
	<input type="text"class="a">
	<input type="text"class="a">
	<input type="text"class="a">
	<input type="text"class="a">
	<a href="">haha</a>

	<p>你好呐</p>
	<p>你好呐</p>
	<p>你好呐</p>
	<p>你好呐</p>
	<p>你好呐</p>


	<div id="wrap">
		<div class="in"></div>
		<button>移除</button>
		<button>添加</button>
	</div>

	<div class="text">
		<ul>
			<!-- li{$}*5 -->
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>
<script src="../jquery-3.3.1.min.js"></script>
<script>
	// $("#box").append("aaa"); 

	//element 原生dom
	// $("#box").append(document.getElementById("content")).css("border","2px solid black");

	//拼jquery对象
	//链式操作，jquery方法返回的都是this
	// $("#box").append($("#content")).css("border","5px solid red");
    
   /* var arr = ["red","yellow","blue"];
	$("ul>li").append(function(index,html){
		//console.log(html);
		// return index + 1;
		//index 元素在集合中的索引
		//html 元素中的内容
		return arr[index];
		
	});*/
	/*$("input.a").wrap("<div></div>");

	$("input.a").wrap(function(index){
		return '<div class="red' + (index + 1) + '"></div>';
	}).click(function(){
		$(this).unwrap();
	})*/

	$("#box,#content").wrapAll("<div style=\"border:5px solid black;\"></div>");
   $("p").wrapInner("<span class='red'></span>");
   //用存在的替换会换位置，用新的替换。。。
   $("a").replaceWith($("#box"));

   //用前面的替换后面的所有元素
   $("<div>我是div</div>").replaceAll("p");



   var inDiv = $(".in").click(function(){
   	console.log(666);
   });
   $("#wrap button:eq(0)").click(function(){
   	inDiv.remove();
   	console.log(inDiv);
   });
   $("#wrap button:eq(1)").click(function(){
   	$("#wrap").prepend(inDiv);
   });



   








</script>